<!-- 新增地址 -->
<template>
  <div class="addres">
    <div class="add-from">
      <p class="from-left">
        <span>联系人</span>
      </p>
      <p class="from-right">
        <input v-model="contact" placeholder="姓名" />
      </p>
    </div>
    <div class="add-from">
      <p class="from-left">
        <span>手机号码</span>
      </p>
      <p class="from-right">
        <input v-model="phone" placeholder="11位手机号" />
      </p>
    </div>
    <div class="add-from" style="position: relative;">
      <p class="from-left">
        <span>选择地区</span>
      </p>
      <p class="from-right" @click="onChooseLocation">
        <span class="addres-sp">{{location}}</span>
        <i class="iconfont icon-dizhiguanli"></i>
      </p>
    </div>
    <div class="add-from">
      <p class="from-left">
        <span>详细地址</span>
      </p>
      <p class="from-right">
        <input v-model="detailed" placeholder="街道门牌信息" />
      </p>
    </div>
    <div class="add-button">
      <button>确定</button>
    </div>
    <div class="add-Wechat">
      <button @click="addWeChat">使用微信地址</button>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      contact: "", // 姓名
      phone: "", // 手机号码
      detailed: "", // 街道门牌信息
      location: "点击定位（不可填写）"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 定位选址
    onChooseLocation() {
      var selef = this;
      wx.chooseLocation({
        success: function(res) {
          selef.location = res.name;
          console.info(res);
        }
      });
    },
    // 获取微信地址
    addWeChat() {
      var _this = this;
      wx.chooseAddress({
        success(res) {
          _this.location =
            res.provinceName + res.cityName + res.countyName + res.detailInfo;
          console.log(res);
        },
        fail(err) {
          console.log(err);
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.add-from {
  width: 90%;
  height: 90rpx;
  margin-left: 5%;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  border-bottom: 1rpx solid #d9d9d9;
}
.from-left {
  width: 180rpx;
}
.iconfont {
  font-size: 22px;
  position: absolute;
  top: 22rpx;
  right: 10rpx;
}
.add-button > button {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 5%;
  margin-top: 40rpx;
  color: #ffffff;
  font-size: 34rpx;
  background-color: #a8a8a8;
}
.add-Wechat > button {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 5%;
  margin-top: 40rpx;
  color: #7a7a7a;
  font-size: 34rpx;
  background-color: #ffffff;
}
.addres-sp {
  width: 430rpx;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>